<template>
    <div class="search">
        <div class="search-nav-bar">
            <nav-bar class="" :border="false" @arrowIconClick="arrowIconClick" @menuIconClick="menuIconClick">
                <template #title>
                    <search-bar :title="$route.query.currentCity" :keyword="PLACEHOLDER" :cancelIcon="true"
                        @searchClick="handleSearchClick" />
                </template>
            </nav-bar>

            <!-- 位置 - 欢迎度排序 - 筛选 -->
            <dropdown-select :item-data="searchList" />

            <!-- 优惠 - 多人入驻 -->
            <div class="tab-wrapper">
                <tab-select :item-data="searchHouse.hotFilters" />
            </div>
        </div>
        <!-- 房屋列表 -->
        <div class="list">
            <template v-for="(item, index) in searchHouse?.items" :key="index">
                <search-list-item :item-data="item" />
            </template>
        </div>
        <!-- 点击搜索出现结果 -->
        <search-panel @searchPanelDatas="guessulike.group" v-show="showSearchPanel" @search="handleSearchClick"
            @cancel="handleCancelClick" />
    </div>
</template>


<script setup>
import navBar from '@/components/nav-bar/nav-bar.vue';
import searchBar from '@/components/search-bar/search-bar.vue';
import dropdownSelect from '@/components/dropdown-select/dropdown-select.vue';
import searchListItem from '@/components/search-list-item/search-list-item.vue';
import searchPanel from './cpns/search-panel/search-panel.vue';
import tabSelect from '@/components/tab-select/tab-select.vue';
import useSearchStore from '@/stores/modules/search';
import { storeToRefs } from 'pinia';
import { ref } from 'vue';
import router from '@/router';
import { onMounted } from 'vue';

const PLACEHOLDER = "搜索博尔塔拉的景点、地标、房源";

const showSearchPanel = ref(false)

// 获取数据
const searchStore = useSearchStore()
onMounted(() => {
    searchStore.fetchSearchConditions()
    searchStore.fetchSearchHouse()
    searchStore.fetchGuessulike()
})
const { searchList, searchHouse, guessulike } = storeToRefs(searchStore)

const arrowIconClick = () => {
    router.go(-1);
}

const menuIconClick = () => {
    console.log("menuIconClick");
}
const handleSearchClick = () => {
    showSearchPanel.value = true;
}
const handleCancelClick = () => {
    showSearchPanel.value = false;
}


</script>


<style scoped lang="less">
:deep(.van-sticky--fixed .guide-login) {
    margin-left: 0;
    margin-right: 0;
}

.search {
    overflow: hidden;
    width: 100%;
    height: 100%;

    .search-nav-bar {
        position: fixed;
        width: 100%;
        z-index: 100;
    }

    .search-conditions {
        padding-top: 46px;
    }

    .tab-wrapper {
        padding: 12px 0 10px 20px;
        background-color: #f7f8fb;
    }

    .list {
        padding: 141px 20px 0 20px;
        z-index: -1;
        position: relative;
    }
}
</style>